<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li class="lis">阿巴阿巴</li>
			<li class="lis">呀嘞呀嘞</li>
			<li class="lis">木大木大</li>
			<li class="lis">哈哈哈哈</li>
		</ul>
		<input type="button" id="changecolor" value="变色" />
		<script type="text/javascript">
			//点击按钮 页面的li，第1,3,5行背景色设置为红色：第2，4行设置为灰色
//			获取按钮
            var btn =document.getElementById('changecolor');
//			给按钮绑定事件
            btn.onclick=function(){
//			获取所有li
                var lis=document.querySelectorAll('li');
//			遍历数组,给每一个li设置背景色(如果是技术行 红色:如果是偶数行 灰色)
                for(var i=0;i<lis.length;i++){
//              	lis[i]是一个li标签
                    if(i%2==0){
                    lis[i].style.backgroundColor='gray';
                   } else{
                   	lis[i].style.backgroundColor='red';
                   }
                   }
                }
            
//          使用for in 遍历 会取到多余的一些属性,不要用来遍历这个html的结果
//          for((var i in lis)){
//          	console.log(i);
//          	console.log(lis[i]);
//          }
		</script>
	</body>
</html>
